import React from "react";
import { useNavigate } from "react-router-dom";
import { Box, Typography, Button, Paper, Alert, Fade, Container, } from "@mui/material";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";

function CustomErrorPage({ error, resetError }) {
    const navigate = useNavigate();

    const onGoBack = () => {
        if (resetError) {
            resetError();
        }
        navigate("/");
    };

    return (
        <Container maxWidth="sm" sx={{ minHeight: "100vh", display: "flex", alignItems: "center" }}>
            <Fade in={true} timeout={600}>
                <Paper
                    elevation={6}
                    sx={{
                        p: 4,
                        borderRadius: 3,
                        background: "linear-gradient(135deg, #fff 0%, #f5f7fa 100%)",
                        textAlign: "center",
                        width: "100%",
                    }}
                >
                    <Box sx={{ mb: 2 }}>
                        <ErrorOutlineIcon
                            sx={{ fontSize: 80, color: "error.main", opacity: 0.9 }}
                        />
                    </Box>
                    <Typography
                        variant="h4"
                        component="h1"
                        color="text.primary"
                        gutterBottom
                        sx={{ fontWeight: "bold" }}
                    >
                        Oops! Something Went Wrong
                    </Typography>

                    <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
                        {error?.message || "An unexpected error occurred. Don’t worry, we’re here to help!"}
                    </Typography>

                    {error && (
                        <Alert severity="error" sx={{ mb: 3, textAlign: "left" }}>
                            <Typography variant="body2">
                                <strong>Error:</strong> {error.message || "Unknown error"}
                            </Typography>
                        </Alert>
                    )}

                    <Button
                        variant="contained"
                        color="primary"
                        size="large"
                        onClick={onGoBack}
                        sx={{
                            borderRadius: 20,
                            textTransform: "none",
                            px: 4,
                            py: 1.5,
                            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
                            "&:hover": { boxShadow: "0 6px 16px rgba(0, 0, 0, 0.2)" },
                        }}
                    >
                        Back to Home
                    </Button>
                </Paper>
            </Fade>
        </Container>
    );
}

export default CustomErrorPage;